<script setup lang="ts">
import { reactive, ref } from "vue"
import type { User } from "@/api/user/types/user"
import * as user from "@/api/user/index"
import { onMounted } from "vue"
import { ElMessage } from "element-plus"

const tableData = reactive<User[]>([])
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const listUsers = () => {
  user
    .users({
      offset: (currentPage.value - 1) * pageSize.value,
      step: pageSize.value
    })
    .then((res) => {
      tableData.length = 0
      total.value = res.total
      tableData.push(...res.data)
      console.log(res.data)
      console.log(JSON.stringify(tableData))
    })
    .catch((res) => {
      ElMessage.error(`查询用户列表失败！${res?.msg || ""}`)
    })
}

onMounted(listUsers)

const pageSizeChange = () => {
  currentPage.value = 1
  listUsers()
}

const addUserDialogVisible = ref(false)
const addUserForm = reactive({
  username: "",
  phone: "",
  password: ""
})
const addUser = (user: User | undefined) => {
  console.log(user)
  if (user) {
    addUserForm.username = user.username
    addUserForm.phone = user.phone
    addUserForm.password = user.password
  } else {
    addUserForm.username = ""
    addUserForm.phone = ""
    addUserForm.password = ""
  }

  addUserDialogVisible.value = true
}
const submitUser = () => {
  if (!addUserForm.username) {
    ElMessage.error(`请输入用户名`)
    return
  }
  // if (!addUserForm.password) {
  //   ElMessage.error(`请输入密码`)
  //   return
  // }
  if (!addUserForm.phone) {
    ElMessage.error(`请输入手机号`)
    return
  }
  user
    .upsert(addUserForm)
    .then(() => {
      listUsers()
      addUserDialogVisible.value = false
    })
    .catch((res) => {
      ElMessage.error(`添加用户失败！${res?.msg || ""}`)
    })
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-button class="my-4 float-right" type="primary" @click="addUser(undefined)">添加用户</el-button>
      <el-table :data="tableData">
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="createtime" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button text type="primary" @click="addUser(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flex-row-reverse mt-[8px]">
        <el-pagination
          v-if="total > 0"
          layout="prev,pager,next,sizes"
          :total="total"
          v-model:page-size="pageSize"
          :page-sizes="[3, 10, 20, 30, 40, 50]"
          @size-change="pageSizeChange"
          v-model:current-page="currentPage"
          @current-change="listUsers"
        />
      </div>
    </el-card>
  </div>
  <el-dialog v-model="addUserDialogVisible" title="用户">
    <el-form :model="addUserForm">
      <el-form-item label="姓名" label-width="64" required>
        <el-input v-model="addUserForm.username" />
      </el-form-item>

      <el-form-item label="密码" label-width="64">
        <el-input v-model="addUserForm.password" />
        <div class="text-red-400">编辑用户时，不填写密码，则保持原密码。</div>
      </el-form-item>
      <el-form-item label="手机号" label-width="64" required>
        <el-input v-model="addUserForm.phone" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitUser"> 确定 </el-button>
      <el-button @click="addUserDialogVisible = false"> 取消 </el-button>
    </template>
  </el-dialog>
</template>
